<%@page contentType="text/html; charset=UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<link href="css/font.css" rel="stylesheet" type="text/css">
<link href='css/immersive-slider.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.immersive-slider.js"></script>
  <style type="text/css">
    body {
      padding: 0;
      text-align: center;
      margin: 0;
    }
    
    .wrapper {
    	font-family: eng;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto; 
    	overflow: hidden;
    }
    
    a {
      text-decoration: none;
    }
    
    h1, h2 {
      width: 100%;
      float: left;
    }
    h1 {
      margin-top: 25px;
      color: #000;
      margin-bottom: 5px;
      font-size: 50px;
      letter-spacing: -4px;
    }
    h2 {
      color: #444;
      font-weight: 100;
      margin-top: 0;
      margin-bottom: 10px;
    }
    
    .main {
      float: left;
      width: 70%;
      margin: 0 auto;
    }
	
	#right_side{
		float: right;
		width :	30%;
		font-size: 22pt;
		padding-top: 40px;
		color:#2F4F4F;
	}
    .page_container {
      max-width: 960px;
      margin: 50px auto;
      margin-left: 80px;
      margin-top:0px;
    }
  
    .immersive_slider .is-slide .content h2{
      line-height: 130%;
      font-weight: 100;
      color: black;
      font-weight: 100;
    }
    .immersive_slider .is-slide .content a {
      color: white;
    }
    #nanum{
		font-family: nanum;
		font-size: 10pt;
		font-weight: bold;
		color:gray;
	}
  
  /* .immersive_slider .is-slide .content p{
    float: left;
    font-weight: 100;
    width: 100%;
    font-size: 17px;
    margin-top: 5px;
  } */
	</style>
</head>
<body>
  <div class="wrapper">
    <div class="main">
      <div class="page_container">
        <div id="immersive_slider">
          <div class="slide">
            <div class="content">
              <h2>Be Sure to Get Your Daily Vitamins Antioxidant Loaded Berry Boost Smoothies</h2>
            </div>
            <div class="image">
				<img src="images/img1.png" alt="Slider 1">
            </div>
          </div>
          <div class="slide">
            <div class="content">
              	<h2>Reward Yourself. Iced Coffee Beckons. So chill out. You deserve it.</h2>
            </div>
            <div class="image">
				<img src="images/img2.png" alt="Slider 1">
            </div>
          </div>
          <div class="slide">
            <div class="content">
            	<h2>Take Advantage of Our Sweet Reward Buy 9 + Your 10th Beverage is on Us!</h2>
            </div>
            <div class="image">
            	<img src="images/img3.png" alt="Slider 1">
            </div>
          </div>
          
          <a href="#" class="is-prev">&laquo;</a>
          <a href="#" class="is-next">&raquo;</a>
        </div>
      </div>
  	</div>
  	<script type="text/javascript">
  	  $(document).ready( function() {
  	    $("#immersive_slider").immersive_slider({
  	      container: ".main"
  	    });
  	  });
    </script>
    <div id="right_side" style="cursor: pointer">
    	<div onclick="location.href='membership.do'">
    	<img src="images/member_icon.png" width="6%">&nbsp;&nbsp; MEMBER<br>
    	<img src="images/card.jpg" width="150" height="100" style="margin-bottom: 10px; margin-top: 10px"><br>
    	<div id="nanum">사용금액의 10%를 적립하세요!!</div>
    	</div>
    	<br>
    	<div onclick="location.href='branch.do?branchNum=1'">
    	<img src="images/location_icon.png" width="6%">&nbsp;&nbsp;WHERE ?<br>
    	<img src="images/map.png" width="190" height="120"><br>
    	<div id="nanum">이곳으로 찾아오세요!!</div>
    	</div>
    </div>
  </div>
</body>
</html>